<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <ft-dialog :title="dialogTitle"
                   :visible.sync="reportDetailDialog" width="90%" @close="handleClose">
            <div>
                <el-card>
                    <div class="form-title">
                        <span style="font-size: 14px;color:#001616">财报信息</span>
                        <div style='float:right' v-show='!ifEditForm && this.editable'>
                            <el-dropdown>
                                <span>
                                    <el-button style='border:none' size='small' icon='joys-icon-fusionmenu'></el-button>
                                </span>
                                <el-dropdown-menu slot='dropdown'>
                                    <el-dropdown-item @click.native='editFinanceReport'>编辑</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>

                    <div :class="{'form-show':!ifEditForm, 'form-edit':ifEditForm}">
                        <el-form ref='financeReportFormRef' style='text-align:left' inline
                                 :model='financeReportForm' :rules='financeReportFormRules'>
                            <el-row>
                                <el-col :md='8' :lg='6'>
                                    <el-form-item label="报表期间" prop="reportTerm">
                                        <ft-input v-model="financeReportForm.reportTerm"
                                                  :editable='false'></ft-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :md='8' :lg='6'>
                                    <el-form-item label="报表类型" prop="reportType">
                                        <ft-enum-select v-model="financeReportForm.reportType"
                                                        :editing='false'
                                                        service-name="lss-customer"
                                                        type-name="reportType">
                                        </ft-enum-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :md='8' :lg='6'>
                                    <el-form-item label="报表类型细分" prop="reportDetailType">
                                        <ft-enum-select v-model="financeReportForm.reportDetailType"
                                                        :editing='ifEditForm'
                                                        service-name="lss-customer"
                                                        type-name="reportDetailType">
                                        </ft-enum-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :md='8' :lg='6'>
                                    <el-form-item label="审计事务所" prop="comptrollerOffice">
                                        <ft-input v-model="financeReportForm.comptrollerOffice"
                                                  :editable='ifEditForm'></ft-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :md='8' :lg='6'>
                                    <el-form-item label="审计人员" prop="comptrollerName">
                                        <ft-input v-model="financeReportForm.comptrollerName"
                                                  :editable='ifEditForm'></ft-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :md='8' :lg='6'>
                                    <el-form-item label="审计时间" prop="comptrollerDate">
                                        <el-date-picker v-if="ifEditForm" type="date" placeholder="请选择日期"
                                                        v-model="financeReportForm.comptrollerDate"
                                                        value-format='yyyy-MM-dd'>
                                        </el-date-picker>
                                        <span v-else>{{financeReportForm.comptrollerDate}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="审计意见" prop="comptrollerOpinion">
                                        <el-input v-if="ifEditForm"
                                                  v-model="financeReportForm.comptrollerOpinion">
                                        </el-input>
                                        <span v-else class="form-textarea" :title="financeReportForm.comptrollerOpinion">
                                            {{financeReportForm.comptrollerOpinion}}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="审计意见情况说明" prop="comptrollerOpinionExplain">
                                        <el-input v-if="ifEditForm"
                                                  v-model="financeReportForm.comptrollerOpinionExplain">
                                        </el-input>
                                        <span v-else class="form-textarea" :title="financeReportForm.comptrollerOpinionExplain">
                                            {{financeReportForm.comptrollerOpinionExplain}}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="审计机构变更原因" prop="comptrollerChangeReason">
                                        <el-input v-if="ifEditForm"
                                                  v-model="financeReportForm.comptrollerChangeReason">
                                        </el-input>
                                        <span v-else class="form-textarea" :title="financeReportForm.comptrollerChangeReason">
                                            {{financeReportForm.comptrollerChangeReason}}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="未经审计原因" prop="noComptrollerReason">
                                        <el-input v-if="ifEditForm"
                                                  v-model="financeReportForm.noComptrollerReason">
                                        </el-input>
                                        <span v-else class="form-textarea" :title="financeReportForm.noComptrollerReason">
                                            {{financeReportForm.noComptrollerReason}}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <el-form-item label="备注" prop="remark">
                                        <el-input v-if="ifEditForm"
                                                  v-model="financeReportForm.remark">
                                        </el-input>
                                        <span v-else class="form-textarea" :title="financeReportForm.remark">
                                            {{financeReportForm.remark}}
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <div v-if="ifEditForm">
                                        <div class="link-btn-top"></div>
                                        <div style="float: right;margin-right:20px;padding: 16px 0px">
                                            <el-button size='small' @click='cancelEdit'>取消</el-button>
                                            <el-button class='save-button' :disabled="ifDisableSaveButton"
                                                       type='primary' size='small' @click='saveFinanceReport'>保存</el-button>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-card>

                <br>

                <el-card v-if="financeReportForm.dataList && financeReportForm.dataList.length > 0">
                    <div class="form-title">
                        <span style="font-size: 14px;color:#001616">财报数据项</span>
                    </div>
                    <el-table :data="financeReportForm.dataList" width="90%" class="el-table">
                        <el-table-column width="400px" align='left' label="项目名称" prop="reportName"/>
                        <el-table-column width="200px" align='left' label="行次" prop="serialNumber"/>
                        <el-table-column width="200px" align='right'
                                         label="指标值" prop="reportValue" :formatter="moneyFormatter"/>
                    </el-table>
                </el-card>
            </div>
        </ft-dialog>
    </div>
</template>

<script>
    import * as math from 'mathjs'

    export default {
        name: 'FinanceReportDialog',
        components: {
        },
        props: {
            dialogTitle: '',
            // 是否展示当前dialog
            reportDetailDialog: false,
            financeReportId: '',
            editable: false,
        },

        data() {
            return {
                // 表单是否可编辑
                ifEditForm: false,
                // 控制保存按钮是否高亮(可点击)
                ifDisableSaveButton: true,
                // 表单数据
                financeReportForm: {},
                // 表单数据备份
                financeReportFormBack: {},
                // 校验规则
                financeReportFormRules: {
                    reportTerm: [{required: true, message: '报表期间不能为空', trigger: 'blur'}],
                    reportType: [{required: true, message: '报表类型不能为空', trigger: 'blur'}],
                    reportDetailType: [{required: true, message: '报表类型细分不能为空', trigger: 'blur'}],
                    comptrollerOffice: [{max: 80, message: '长度不能大于80个字符', trigger: 'blur'}],
                    comptrollerName: [{max: 30, message: '长度不能大于30个字符', trigger: 'blur'}],
                    comptrollerOpinion: [{max: 200, message: '长度不能大于200个字符', trigger: 'blur'}],
                    comptrollerOpinionExplain: [{max: 200, message: '长度不能大于200个字符', trigger: 'blur'}],
                    comptrollerChangeReason: [{max: 200, message: '长度不能大于200个字符', trigger: 'blur'}],
                    noComptrollerReason: [{max: 200, message: '长度不能大于200个字符', trigger: 'blur'}],
                    remark: [{max: 200, message: '长度不能大于200个字符', trigger: 'blur'}],

                },
            }
        },
        watch: {
            financeReportForm: {
                handler(val) {
                    if (val.reportTerm || val.reportType || val.reportDetailType || val.comptrollerOffice || val.comptrollerName
                        || val.comptrollerDate || val.comptrollerOpinion || val.comptrollerOpinionExplain || val.comptrollerChangeReason
                        || val.noComptrollerReason || val.remark) {
                        this.ifDisableSaveButton = false
                    }
                },
                deep: true,
                immediate: true
            },
        },
        mounted() {
            this.loadReportInfo()
        },
        methods: {
            cancel() {
                this.$emit('rentValue', false)
            },
            handleClose() {
                this.$emit('rentValue', false)
            },
            // 加载财报数据
            loadReportInfo() {
                if (this.financeReportId) {
                    const url = '/joys-rest/lss-customer/financeReport/'
                    this.$http.get(url + this.financeReportId).then(
                        resp => {
                            this.financeReportForm = resp.body
                        }, resp => {
                            this.$message.error('财报数据加载失败, 请重试!')
                        }
                    )
                }
            },
            // 修改财报基本信息
            editFinanceReport() {
                // 备份
                this.financeReportFormBack = JSON.parse(JSON.stringify(this.financeReportForm))
                // 将当前表单设置为可编辑
                this.ifEditForm = true
                // 将保存按钮置灰
                this.ifDisableSaveButton = true

            },
            // 取消修改
            cancelEdit() {
                // 恢复修改前的数据
                this.financeReportForm = JSON.parse(JSON.stringify(this.financeReportFormBack))
                // 将当前表单设置为不可编辑
                this.ifEditForm = false
                // 将保存按钮置灰
                this.ifDisableSaveButton = true
                // 取消校验的红字验证
                this.$refs.financeReportFormRef.resetFields()
            },
            // 保存
            saveFinanceReport() {
                // 将保存按钮置灰, 防止重复提交
                this.ifDisableSaveButton = true
                this.$refs.financeReportFormRef.validate(
                    valid => {
                        // 完成表单校验
                        if (valid) {
                            const url = '/joys-rest/lss-customer/financeReport/'
                            this.$http.put(url, this.financeReportForm).then(
                                resp => {
                                    // 将页面数据替换为返回的数据
                                    this.financeReportForm = resp.body
                                    // 将当前表单设置为不可编辑
                                    this.ifEditForm = false
                                    this.$message.success('保存成功！')
                                }, resp => {
                                    // 还原保存按钮的状态
                                    this.ifDisableSaveButton = false
                                    this.$message.error('保存失败!')

                                }
                            )
                        }
                    }
                )
            },
            //金额类型转换
            moneyFormatter: function (row, column) {
                var val = row[column.property]
                if (this.isRealNum(val)) {
                    const valMultiple = math.multiply(val, 100)
                    const roundVal = math.round(valMultiple)
                    val = math.divide(roundVal, 100)
                    val = this.formatNum(val)
                    val = val.toString()
                    //补位保留两位小数
                    if(val.indexOf('.') === -1){
                        val = val + '.00'
                    }
                    if(val.length - val.indexOf('.') === 2){
                        val = val + '0'
                    }
                    return val
                }
                return val
            },
            //数字判断
            isRealNum(val) {
                // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
                if (val === "" || val == null) {
                    return false
                }
                if (!isNaN(val)) {
                    return true
                } else {
                    return false
                }
            },
            //千分符
            formatNum(strNum) {
                if (strNum.length <= 3) {
                    return strNum
                }
                if (!/^(\+-)?(\d+)(\.\d+)?$/.test(strNum)) {
                    return strNum
                }
                // array需要先定义，再使用，不然报ReferenceError，因为let不存在变量提升
                let array
                array = strNum.toString().split('.')
                let reg =/\d{1,3}(?=(\d{3})+$)/g;
                array[0] = array[0].toString().replace(reg, '$&,');
                return array.join('.')

            },

        }



    }
</script>

<style>

    .form-title {
        text-align: left;
        font-size: 14px;
        line-height: 26px;
        color: #747778;
    }

    .form-show {
        clear: both;
        padding-top: 16px;
    }

    .form-edit {
        clear: both;
        padding-top: 16px;
        background-color: #F4F8F9;
    }

    .form-textarea {
        overflow: hidden;
        display: -webkit-box; /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
        -webkit-line-clamp: 2 /*用来限制在一个块元素显示的文本的行数*/
    }
     .el-table .cell {
         white-space: pre-wrap;
     }
</style>
